import React, { useEffect, useState } from 'react';
import styles from './msgdialog.module.css'
import { Mask } from 'antd-mobile';


export default function MsgDialog({ visible, content, onClose }) {

    const [needDisplay, setNeedDisplay] = useState(false);
    const [formatContent, setFormatContent] = useState(content);

    useEffect(() => {
        setNeedDisplay(visible)
    }, [visible])

    useEffect(() => {
        setFormatContent(content);
    }, [content])


    const onHandleCloseAction = () => {
        onClose && onClose();
    }

    return (
        <Mask visible={needDisplay} opacity={0.6}
            onMaskClick={() => { }}>
            <div className={styles.msgDialogOverlayBg} onClick={() => { onClose() }}>
                <div className={styles.msgDialogOverlayContent} onClick={(e) => { e.stopPropagation(); }}>
                    <div className={styles.msgDialogHeader} onClick={(e) => { e.stopPropagation(); }}>提示</div>
                    <div className={`${styles.msgDialogTitle} ${styles.msgDialogMarginTop16Px}`}>{formatContent}</div>
                    <div className={`${styles.msgDialogButtonBg} ${styles.msgDialogMarginTop26Px}`}>
                        <div className={styles.msgDialogConfirmButton} onClick={onHandleCloseAction}>确定</div>
                    </div>
                </div>
            </div>
        </Mask >
    );
};
